<html>
<link rel="stylesheet" href="/css/view/register.css">
<link rel="icon" href="/images/上方小图标/位图/上方小图标.png">
<title>注册账号</title>

<body>

  <div class="login">
    <!-- 左边背景图 -->
    <div class="left-box"></div>
    <!-- 登录框 -->
    <div class="right-box">
      <h1>注册账号</h1>
      <input class="userNumber" type="text" placeholder="请输入账号">
      <img class="Correct" src="/images/login/矢量图/正确.svg" alt="">
      <p class="error"></p>

      <input class="userPass1" type="password" placeholder="请输入密码">
      <img class="Correct" src="/images/login/矢量图/正确.svg" alt="">
      <p class="error"></p>

      <input class="userPass2" type="password" placeholder="再次输入密码">
      <img class="Correct" src="/images/login/矢量图/正确.svg" alt="">
      <p class="error"></p>

      <input class="userNickName" type="text" placeholder="请输入昵称">
      <img class="Correct" src="/images/login/矢量图/正确.svg" alt="">
      <p class="error"></p>

      <button class="register">注册</button>
      <a href="/login">已有账号 返回登录>></a>
      <a href="/">返回首页>></a>
    </div>
  </div>


  <script src="/js/myJS/My_JS.js"></script>

  <script>

    let userNumberOnblur = false;
    let userPass1Onblur = false;
    let userPass2Onblur = false;
    let userNickNameOnblur = false;

    let error = $Al(".error");

    $(".userNumber").onblur = function () {
      let userNumberVal = $(".userNumber").value;
      let userRegular = /^[a-zA-z0-9]{6,12}$/;

      if (!userRegular.test(userNumberVal) || userNumberVal == "") {
        error[0].innerHTML = "请输入6-12位英文或数字的账号！";
        userNumberOnblur = false;
      } else {
        error[0].innerHTML = "";
        userNumberOnblur = true;
      }

      console.log(`账号输入结果为：${userNumberOnblur}`);
    }


    $(".userPass1").onblur = function () {
      let userPass1Val = $(".userPass1").value;
      let userPass1Regular = /^[a-zA-z0-9]{6,18}$/;

      if (!userPass1Regular.test(userPass1Val) || userPass1Val == "") {
        error[1].innerHTML = "请输入6-18位英文或数字的密码！";
        userPass1Onblur = false;
      } else {
        error[1].innerHTML = "";
        userPass1Onblur = true;
      }

      console.log(`密码输入结果为：${userPass1Onblur}`);
    }


    $(".userPass2").onblur = function () {
      let userPass2Val = $(".userPass2").value;
      let userPass2Regular = /^[a-zA-z0-9]{6,18}$/;

      if (!userPass2Regular.test(userPass2Val) || userPass2Val == "") {
        error[2].innerHTML = "请输入6-18位英文或数字的密码！";
        userPass2Onblur = false;
      } else {
        error[2].innerHTML = "";
        userPass2Onblur = true;
      }

      console.log(`第二次密码输入结果为：${userPass2Onblur}`);
    }

    // 昵称验证
    $(".userNickName").onblur = function () {
      let userNickNameVal = $(".userNickName").value;
      let userNickNameRegular = /^[\u4e00-\u9fa5a-zA-Z0-9]{2,12}$/;

      if (!userNickNameRegular.test(userNickNameVal) || userNickNameVal == "") {
        error[3].innerHTML = "昵称格式长度不能小于两位，不能包括空格或符号";
        userNickNameOnblur = false;
      } else {
        error[3].innerHTML = "";
        userNickNameOnblur = true;
      }

      console.log(`昵称输入结果为：${userNickNameOnblur}`);
    }

    $(".register").onclick = function () {
      if (userNumberOnblur && userPass1Onblur && userPass2Onblur && userNickNameOnblur) {
        alert("可以注册！")
      } else {
        alert("不能注册！")
      }
    }
  </script>

</body>

</html>